<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo15-vue路由</title>
  <script src="./js/vue.min.js"></script>
  <script src="./js/vue-router.js"></script>
</head>

<body>

   <div id="app">
     <h1>hello App</h1>
     <p>
       <router-link to="/foo" event="mouseover">Go to Foo</router-link>
       <router-link to="/bar" tag="li">Go to Bar</router-link>
       <router-link :to="{path: 'register',query:{plan:'private'}}" replace>Go to Register</router-link>
     </p>
     <router-view></router-view>
   </div>

</body>

<script type="application/javascript">
  //如果使用模块化机制编程，需要导入vue和VueRouter,要使用Vue.use(VueRouter)
  //定义（路由）组件
  //组件可以通过文件import进来
  const Foo = {template:'<div>foo</div>'};
  const Bar = {template:'<div>bar</div>'};
  const Reg = { template: '<div>register</div>'}
  //每个路由映射一个组件
  const routes = [
    {path:"/foo",component: Foo},
    {path: "/bar",component: Bar},
    {path: "/register",component:Reg}
  ];
  //创建router实例，再传入具体的routers
  const router = new VueRouter({
    routes
  });
  //创建和挂载根实例，注入路由对象
  const app = new Vue({
    router
  }).$mount('#app');


</script>
</html>
